<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeUI新闻列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">
</head>
<body>
    <!-- tabbar -->
    <div class="weui-navbar">
        <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
        <a href="#" class="weui-navbar__item">热点</a>
        <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
    <!-- searchbar -->
    <div class="weui-search-bar" id="search_bar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索">
                <a href="#" class="weui-icon-clear" id="search_clear"></a>
            </div>
            <label for="search_input" class="weui-search-bar__label">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="#" class="weui-search-bar__cancel-btn">取消</a>
    </div>
    <!-- news-list -->
</body>
<script src="./main.js"></script>
</html>